TV এবং Wearable Devices এর জন্য Custom UI তৈরি

TV এবং Wearable Devices এর জন্য Custom UI ডিজাইন করতে হলে আপনাকে প্রতিটি ডিভাইসের স্ক্রিন সাইজ, ইন্টারঅ্যাকশন প্যাটার্ন, এবং ব্যবহারকারীর অভিজ্ঞতা বিবেচনা করতে হবে। Wear OS এর জন্য, UI সাধারণত ছোট এবং গোলাকার স্ক্রিনের জন্য ডিজাইন করা হয়, যেখানে TV UI বড় স্ক্রিন এবং রিমোট কন্ট্রোল ব্যবহারকারীদের জন্য তৈরি করা হয়।

TV এবং Wearable Devices এর জন্য Custom UI তৈরি

নিচে TV এবং Wearable Devices এর জন্য Custom UI তৈরির জন্য বিস্তারিত বিশ্লেষণ এবং উদাহরণ দেওয়া হলো:

Wear OS (Wearable Devices) এর জন্য Custom UI

Wear OS ডিভাইসের জন্য UI তৈরি করতে, আপনাকে ছোট, কমপ্যাক্ট, এবং গোলাকার স্ক্রিনের জন্য উপযুক্ত ডিজাইন করতে হবে। এটি সাধারণত Gesture এবং Touch Interaction ভিত্তিক।

১. Circular এবং Compact Component ডিজাইন করা

Wear OS এ UI ডিজাইন করার সময় Circular UI Layout এবং Curved Text এর মতো কম্পোনেন্ট ব্যবহার করা হয়।

উদাহরণ: Circular UI Layout তৈরি করা

@Composable
fun CircularUI() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.DarkGray),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Wearable UI",
            color = Color.White,
            fontSize = 16.sp,
            modifier = Modifier
                .clip(CircleShape)
                .background(Color.Blue)
                .padding(16.dp)
        )
    }
}

এখানে একটি গোলাকার UI ডিজাইন করা হয়েছে, যেখানে Text কম্পোনেন্টটি Circle Shape এ ক্লিপ করা হয়েছে।

২. CurvedText এবং BoxInsetLayout ব্যবহার করা

Wear OS এ CurvedText এবং BoxInsetLayout ব্যবহার করে Custom UI তৈরি করা যায়, যা গোলাকার স্ক্রিনের জন্য উপযুক্ত।

উদাহরণ: CurvedText ব্যবহার করা

@Composable
fun CurvedTextExample() {
    CurvedLayout {
        CurvedText(
            text = "Curved Text for Wear OS",
            style = CurvedTextStyle(fontSize = 14.sp, color = Color.White)
        )
    }
}

CurvedLayout এবং CurvedText ব্যবহার করে গোলাকার স্ক্রিনের চারপাশে টেক্সট প্রদর্শন করা হয়েছে।

৩. WearableRecyclerView ব্যবহার করে স্ক্রলেবল কন্টেন্ট তৈরি করা

Wear OS এ স্ক্রলেবল কন্টেন্ট প্রদর্শনের জন্য WearableRecyclerView ব্যবহার করা হয়। এটি একটি Scrollable এবং Compact UI Component তৈরি করতে সহায়ক।

উদাহরণ: WearableRecyclerView ব্যবহার করা

class WearableRecyclerViewAdapter(val items: List<String>) : RecyclerView.Adapter<ViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = items[position]
    }

    override fun getItemCount() = items.size
}

এখানে একটি WearableRecyclerViewAdapter তৈরি করা হয়েছে, যা ডাইনামিক কন্টেন্ট প্রদর্শন করে Wear OS স্ক্রিনে।

Android TV এর জন্য Custom UI

Android TV অ্যাপের জন্য Custom UI ডিজাইন করার সময় বড় স্ক্রিন এবং রিমোট ইন্টারঅ্যাকশন বিবেচনা করা হয়। এটি সাধারণত Leanback Library এবং ExoPlayer এর মতো টুল ব্যবহার করে তৈরি করা হয়।

১. Leanback Library ব্যবহার করে কাস্টম Browse Fragment তৈরি করা

Android TV অ্যাপের জন্য Leanback Library ব্যবহার করে কাস্টম Browse Fragment তৈরি করা যায়, যা বড় স্ক্রিনে নেভিগেশন সহজ করে।

উদাহরণ: Custom Browse Fragment তৈরি করা=

class CustomBrowseFragment : BrowseSupportFragment() {
    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        title = "TV Custom UI"

        val rowsAdapter = ArrayObjectAdapter(ListRowPresenter())

        val header = HeaderItem(0, "Category")
        val listAdapter = ArrayObjectAdapter(CustomItemPresenter())
        listAdapter.add("Item 1")
        listAdapter.add("Item 2")
        
        rowsAdapter.add(ListRow(header, listAdapter))
        adapter = rowsAdapter
    }
}

এখানে BrowseSupportFragment ব্যবহার করে একটি কাস্টম ব্রাউজ ফ্রাগমেন্ট তৈরি করা হয়েছে, যা TV স্ক্রিনে কন্টেন্ট প্রদর্শন করে।

২. Custom Presenter ব্যবহার করে UI Component তৈরি করা

Leanback Library এ Presenter ব্যবহার করে কাস্টম UI Component তৈরি করা যায়, যা কনটেন্ট প্রদর্শন করে।

উদাহরণ: Custom Presenter তৈরি করা

class CustomItemPresenter : Presenter() {
    override fun onCreateViewHolder(parent: ViewGroup): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.tv_item_layout, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, item: Any) {
        val textView = viewHolder.view.findViewById<TextView>(R.id.textView)
        textView.text = item as String
    }

    override fun onUnbindViewHolder(viewHolder: ViewHolder) {}
}

এখানে একটি Presenter তৈরি করা হয়েছে, যা TV স্ক্রিনে কাস্টম আইটেম প্রদর্শন করে।

৩. Grid UI এবং Focusable View তৈরি করা

TV UI তে GridLayout এবং Focusable Views ব্যবহার করে Remote Navigation সহজ করা যায়।

উদাহরণ: GridLayout ব্যবহার করা

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="3"
    android:rowCount="2">

    <TextView
        android:id="@+id/item1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:focusable="true"
        android:background="?attr/selectableItemBackground"
        android:text="Item 1"/>
</GridLayout>

এখানে GridLayout ব্যবহার করে TV স্ক্রিনের জন্য একটি গ্রিড UI তৈরি করা হয়েছে, যেখানে প্রতিটি আইটেম ফোকাসেবল।

৪. ExoPlayer দিয়ে ভিডিও প্লেয়ার কাস্টমাইজ করা

Android TV এ ভিডিও প্লেয়ার কাস্টমাইজ করতে ExoPlayer ব্যবহার করা হয়।

উদাহরণ: Custom ExoPlayer ব্যবহার করা

class VideoPlayerActivity : AppCompatActivity() {
    private lateinit var player: ExoPlayer

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_video_player)

        player = ExoPlayer.Builder(this).build()
        val playerView = findViewById<PlayerView>(R.id.player_view)
        playerView.player = player

        val mediaItem = MediaItem.fromUri("https://example.com/video.mp4")
        player.setMediaItem(mediaItem)
        player.prepare()
        player.playWhenReady = true
    }

    override fun onDestroy() {
        super.onDestroy()
        player.release()
    }
}

এখানে ExoPlayer ব্যবহার করে একটি ভিডিও প্লেয়ার তৈরি করা হয়েছে, যা কাস্টমাইজড এবং বড় স্ক্রিনে উপযুক্ত।

৫. Custom Focus Management এবং D-Pad Navigation

TV UI তে D-Pad Navigation সঠিকভাবে কাজ করতে Focusable Views এবং Custom Key Event Listener ব্যবহার করা হয়।

উদাহরণ: Key Event Listener ব্যবহার করা

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    return when (keyCode) {
        KeyEvent.KEYCODE_DPAD_UP -> {
            // Handle up navigation
            true
        }
        KeyEvent.KEYCODE_DPAD_DOWN -> {
            // Handle down navigation
            true
        }
        else -> super.onKeyDown(keyCode, event)
    }
}

এখানে KeyEvent Listener ব্যবহার করে Remote D-Pad Navigation সেট করা হয়েছে।

উপসংহার

Wear OS এবং Android TV এর জন্য Custom UI ডিজাইন করতে, প্রতিটি ডিভাইসের স্ক্রিন সাইজ, ইন্টারঅ্যাকশন প্যাটার্ন, এবং ব্যবহারকারীর অভিজ্ঞতা বিবেচনা করে ডিজাইন করা হয়। Wear OS এর জন্য Circular UI, CurvedText, এবং WearableRecyclerView এর মতো কম্পোনেন্ট ব্যবহার করা হয়, যেখানে Android TV এর জন্য Leanback Library, ExoPlayer, এবং Custom Presenter ব্যবহার করে UI ডিজাইন করা হয়। সঠিকভাবে UI কাস্টমাইজ করে এবং ইন্টারঅ্যাকশনের উপর ভিত্তি করে Navigation নিশ্চিত করে, আপনি একটি কার্যকর এবং ব্যবহারবান্ধব Wear OS এবং Android TV অ্যাপ তৈরি করতে পারবেন।